<template>
<!--  <a-modal-->
<!--    title="社会关系"-->
<!--    :width="800"-->
<!--    :visible="visible"-->
<!--    :confirmLoading="confirmLoading"-->
<!--    @ok="handleSubmit"-->
<!--    @cancel="handleCancel"-->
<!--    okText="确认"-->
<!--    cancelText="取消"-->
<!--  >-->
  <div v-if="visible">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <a-row :gutter="12">
            <a-col :md="8" :sm="24">
              <a-form-item
                label="关系人姓名"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" v-model="domain.socialRelationName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="与本人关系"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-select :disabled="isEdit[index] === false" v-model="domain.socialRelationRelationship" placeholder="请选择关系">
                  <a-select-option value="丈夫">丈夫</a-select-option>
                  <a-select-option value="妻子">妻子</a-select-option>
                  <a-select-option value="独生子">独生子</a-select-option>
                  <a-select-option value="儿子">儿子</a-select-option>
                  <a-select-option value="养(继)子">养(继)子</a-select-option>
                  <a-select-option value="女婿">女婿</a-select-option>
                  <a-select-option value="其它儿子">其它儿子</a-select-option>
                  <a-select-option value="独生女">独生女</a-select-option>
                  <a-select-option value="女儿">女儿</a-select-option>
                  <a-select-option value="养女">养女</a-select-option>
                  <a-select-option value="儿媳">儿媳</a-select-option>
                  <a-select-option value="其它女儿">其它女儿</a-select-option>
                  <a-select-option value="孙子">孙子</a-select-option>
                  <a-select-option value="孙女">孙女</a-select-option>
                  <a-select-option value="外孙子">外孙子</a-select-option>
                  <a-select-option value="外孙女">外孙女</a-select-option>
                  <a-select-option value="(外)孙媳妇">(外)孙媳妇</a-select-option>
                  <a-select-option value="(外)孙女婿">(外)孙女婿</a-select-option>
                  <a-select-option value="(外)曾孙子">(外)曾孙子</a-select-option>
                  <a-select-option value="(外)曾孙女">(外)曾孙女</a-select-option>
                  <a-select-option value="其他孙子(女)">其他孙子(女)</a-select-option>
                  <a-select-option value="父亲">父亲</a-select-option>
                  <a-select-option value="母亲">母亲</a-select-option>
                  <a-select-option value="公公">公公</a-select-option>
                  <a-select-option value="婆婆">婆婆</a-select-option>
                  <a-select-option value="岳父">岳父</a-select-option>
                  <a-select-option value="岳母">岳母</a-select-option>
                  <a-select-option value="继(养)父">继(养)父</a-select-option>
                  <a-select-option value="继(养)母">继(养)母</a-select-option>
                  <a-select-option value="其他父母关系">其他父母关系</a-select-option>
                  <a-select-option value="祖父">祖父</a-select-option>
                  <a-select-option value="祖母">祖母</a-select-option>
                  <a-select-option value="外祖父">外祖父</a-select-option>
                  <a-select-option value="外祖母">外祖母</a-select-option>
                  <a-select-option value="配偶的(外)祖父母">配偶的(外)祖父母</a-select-option>
                  <a-select-option value="曾祖父">曾祖父</a-select-option>
                  <a-select-option value="曾祖母">曾祖母</a-select-option>
                  <a-select-option value="配偶的曾祖父母">配偶的曾祖父母</a-select-option>
                  <a-select-option value="其他(外)祖父母">其他(外)祖父母</a-select-option>
                  <a-select-option value="兄">兄</a-select-option>
                  <a-select-option value="嫂">嫂</a-select-option>
                  <a-select-option value="弟">弟</a-select-option>
                  <a-select-option value="弟媳">弟媳</a-select-option>
                  <a-select-option value="姐姐">姐姐</a-select-option>
                  <a-select-option value="姐夫">姐夫</a-select-option>
                  <a-select-option value="妹妹">妹妹</a-select-option>
                  <a-select-option value="妹夫">妹夫</a-select-option>
                  <a-select-option value="其他兄弟姐妹">其他兄弟姐妹</a-select-option>
                  <a-select-option value="伯父">伯父</a-select-option>
                  <a-select-option value="伯母">伯母</a-select-option>
                  <a-select-option value="叔父">叔父</a-select-option>
                  <a-select-option value="婶母">婶母</a-select-option>
                  <a-select-option value="舅父">舅父</a-select-option>
                  <a-select-option value="舅母">舅母</a-select-option>
                  <a-select-option value="姨父">姨父</a-select-option>
                  <a-select-option value="姨母">姨母</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="身份证号"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" v-model="domain.socialRelationIdcard"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="12">
            <a-col :md="8" :sm="24">
              <a-form-item
                label="性别"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-radio-group :disabled="isEdit[index] === false" v-model="domain.socialRelationSex" >
                  <a-radio :value="'男'">男</a-radio>
                  <a-radio :value="'女'">女</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="出生日期"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-date-picker :format="'YYYY-MM-DD'" :disabled="isEdit[index] === false" v-model="domain.socialRelationBirthday" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="籍贯"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" placeholder="关系人籍贯(境外填国籍)" v-model="domain.socialRelationNativePlace"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="12">
            <a-col :md="8" :sm="24">
              <a-form-item
                label="民族"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-select :disabled="isEdit[index] === false" v-model="domain.socialRelationNation" placeholder="请选择民族">
                  <a-select-option value="汉族">汉族</a-select-option>
                  <a-select-option value="蒙古族">蒙古族</a-select-option>
                  <a-select-option value="回族">回族</a-select-option>
                  <a-select-option value="藏族">藏族</a-select-option>
                  <a-select-option value="维吾尔族">维吾尔族</a-select-option>
                  <a-select-option value="苗族">苗族</a-select-option>
                  <a-select-option value="彝族">彝族</a-select-option>
                  <a-select-option value="壮族">壮族</a-select-option>
                  <a-select-option value="布依族">布依族</a-select-option>
                  <a-select-option value="朝鲜族">朝鲜族</a-select-option>
                  <a-select-option value="满族">满族</a-select-option>
                  <a-select-option value="侗族">侗族</a-select-option>
                  <a-select-option value="瑶族">瑶族</a-select-option>
                  <a-select-option value="白族">白族</a-select-option>
                  <a-select-option value="土家族">土家族</a-select-option>
                  <a-select-option value="哈尼族">哈尼族</a-select-option>
                  <a-select-option value="哈萨克族">哈萨克族</a-select-option>
                  <a-select-option value="傣族">傣族</a-select-option>
                  <a-select-option value="黎族">黎族</a-select-option>
                  <a-select-option value="傈僳族">傈僳族</a-select-option>
                  <a-select-option value="佤族">佤族</a-select-option>
                  <a-select-option value="畲族">畲族</a-select-option>
                  <a-select-option value="高山族">高山族</a-select-option>
                  <a-select-option value="拉祜族">拉祜族</a-select-option>
                  <a-select-option value="水族">水族</a-select-option>
                  <a-select-option value="东乡族">东乡族</a-select-option>
                  <a-select-option value="纳西族">纳西族</a-select-option>
                  <a-select-option value="景颇族">景颇族</a-select-option>
                  <a-select-option value="柯尔克孜族">柯尔克孜族</a-select-option>
                  <a-select-option value="土族">土族</a-select-option>
                  <a-select-option value="达斡尔族">达斡尔族</a-select-option>
                  <a-select-option value="仫佬族">仫佬族</a-select-option>
                  <a-select-option value="羌族">羌族</a-select-option>
                  <a-select-option value="布朗族">布朗族</a-select-option>
                  <a-select-option value="撒拉族">撒拉族</a-select-option>
                  <a-select-option value="毛南族">毛南族</a-select-option>
                  <a-select-option value="仡佬族">仡佬族</a-select-option>
                  <a-select-option value="锡伯族">锡伯族</a-select-option>
                  <a-select-option value="阿昌族">阿昌族</a-select-option>
                  <a-select-option value="普米族">普米族</a-select-option>
                  <a-select-option value="塔吉克族">塔吉克族</a-select-option>
                  <a-select-option value="怒族">怒族</a-select-option>
                  <a-select-option value="乌孜别克族">乌孜别克族</a-select-option>
                  <a-select-option value="俄罗斯族">俄罗斯族</a-select-option>
                  <a-select-option value="鄂温克族">鄂温克族</a-select-option>
                  <a-select-option value="德昂族">德昂族</a-select-option>
                  <a-select-option value="保安族">保安族</a-select-option>
                  <a-select-option value="裕固族">裕固族</a-select-option>
                  <a-select-option value="京族">京族</a-select-option>
                  <a-select-option value="塔塔尔族">塔塔尔族</a-select-option>
                  <a-select-option value="独龙族">独龙族</a-select-option>
                  <a-select-option value="鄂伦春族">鄂伦春族</a-select-option>
                  <a-select-option value="赫哲族">赫哲族</a-select-option>
                  <a-select-option value="门巴族">门巴族</a-select-option>
                  <a-select-option value="珞巴族">珞巴族</a-select-option>
                  <a-select-option value="基诺族">基诺族</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="现居住地"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" v-model="domain.socialRelationCurrentAddress"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="工作部别"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" v-model="domain.socialRelationWorkUnits"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="12">
            <a-col :md="8" :sm="24">
              <a-form-item
                label="职务或职业"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" v-model="domain.socialRelationPost"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="政治面貌"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-select :disabled="isEdit[index] === false" v-model="domain.socialRelationPoliticsStatus" placeholder="请选择政治面貌">
                  <a-select-option value="中共党员">中共党员</a-select-option>
                  <a-select-option value="中共预备党员">中共预备党员</a-select-option>
                  <a-select-option value="共青团员">共青团员</a-select-option>
                  <a-select-option value="民革党员">民革党员</a-select-option>
                  <a-select-option value="民盟盟员">民盟盟员</a-select-option>
                  <a-select-option value="民建会员">民建会员</a-select-option>
                  <a-select-option value="民进会员">民进会员</a-select-option>
                  <a-select-option value="农工党党员">农工党党员</a-select-option>
                  <a-select-option value="致公党党员">致公党党员</a-select-option>
                  <a-select-option value="九三学社社员">九三学社社员</a-select-option>
                  <a-select-option value="台盟盟员">台盟盟员</a-select-option>
                  <a-select-option value="无党派人士">无党派人士</a-select-option>
                  <a-select-option value="群众">群众</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="宗教信仰"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-select :disabled="isEdit[index] === false" v-model="domain.socialRelationReligion" placeholder="请选择宗教">
                  <a-select-option value="无">无</a-select-option>
                  <a-select-option value="佛教">佛教</a-select-option>
                  <a-select-option value="基督教">基督教</a-select-option>
                  <a-select-option value="伊斯兰教">伊斯兰教</a-select-option>
                  <a-select-option value="道教">道教</a-select-option>
                  <a-select-option value="其它">其它</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="手机号"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" v-model="domain.socialRelationPhone" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="text-align: right">
            <a-button
              type="primary"
              ghost
              v-if="dynamicValidateForm.domains.length > 0 && isEdit[index] === false"
              @click="handleEdit(domain, index)"
              style="margin-bottom: 15px; margin-right: 20px">编辑
            </a-button>
            <a-popconfirm
              title="确定要保存这1条记录吗？"
              @confirm="handleSave(domain, index)"
              okText="是"
              cancelText="否"
            >
              <a-button
                type="primary"
                ghost
                v-if="dynamicValidateForm.domains.length > 0 && isEdit[index] === true"
                style="margin: 4px 18px 15px 15px">保存
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              title="确定要删除这1条记录吗？"
              @confirm="removeDomain(domain)"
              okText="是"
              cancelText="否"
            >
              <a-button
                type="danger"
                ghost
                v-if="dynamicValidateForm.domains.length > 0"
                style="margin: 4px 6px 15px 10px">删除
              </a-button>
            </a-popconfirm>
          </a-row>
        </a-row>
        <a-form-item style="text-align: center">
          <a-button type="dashed" style="width: 60%; margin-left: 20px" @click="addDomain">
            <a-icon type="plus" /> 添加社会关系
          </a-button>
        </a-form-item>
<!--        <a-form-item style="text-align: right">-->
<!--          <a-button type="primary" style="margin-bottom: 15px; margin-right: 12px" @click="handleSubmit">-->
<!--            确认-->
<!--          </a-button>-->
<!--        </a-form-item>-->
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { addSocialRelationList, getSocialRelation, removeSocialRelation } from '@/api/basic/soldier'
import { addSocialRelation, updateSocialRelation } from '../../../../api/basic/soldier'

export default {
  name: 'SocialRelation',
  data () {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      isEdit: [],
      preLen: 0,
      isSubmit: false,
      isValid: true,
      dynamicValidateForm: {
        domains: []
      },
      domainLen: 0,
      record: {},
      socialRelations: [],
      socialRelationId: '',
      type: '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  created () {
  },
  methods: {
    handleEdit (domain, index) {
      this.isEdit[index] = true
      this.visible = false
      this.visible = true
    },
    handleSave (domain, index) {
      const _this = this
      this.isEdit[index] = false
      this.visible = false
      this.visible = true
      const delayTime = new Date(domain.socialRelationBirthday).toJSON()
      domain.socialRelationBirthday = new Date(
        +new Date(delayTime) + 8 * 3600 * 1000
      )
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
      if (domain.socialRelationName === '' || domain.socialRelationRelationship === '' || domain.socialRelationIdcard === '' ||
        domain.socialRelationSex === '' || domain.socialRelationBirthday === '' || domain.socialRelationNativePlace === '' ||
        domain.socialRelationNation === '' || domain.socialRelationWorkUnits === '' || domain.socialRelationPost === '' ||
        domain.socialRelationPoliticsStatus === '' || domain.socialRelationReligion === '' || domain.socialRelationCurrentAddress === '') {
        this.$message.error('请填写完整信息！')
      } else if (index < this.preLen) {
        updateSocialRelation(Object.assign(domain))
          .then(res => {
            if (res.message !== 'error') {
              this.$message.success('提交成功!')
              this.visible = false
              this.visible = true
            } else {
              this.$message.error('操作失败!')
            }
          })
      } else {
        addSocialRelation(Object.assign(domain))
          .then(res => {
            if (res.message !== 'error') {
              this.$message.success('添加成功!')
              this.dynamicValidateForm.domains[_this.domainLen - 1].socialRelationId = parseInt(res.message)
              this.dynamicValidateForm.domains[_this.domainLen - 1].isFlag = 0
              this.visible = false
              this.visible = true
              this.preLen += 1
            } else {
              this.$message.error('操作失败!')
            }
          })
      }
    },
    onPanelChange (value, mode) {
      console.log(value, mode)
    },
    socialRelation (record, type) {
      this.visible = true
      this.record = record
      this.isEdit = []
      this.preLen = 0
      if (type === 1) {
        this.type = '家庭成员'
      }
      if (type === 2) {
        this.type = '主要社会关系'
      }
      if (type === 3) {
        this.type = '国境外关系'
      }
      getSocialRelation({ 'personId': record.personId })
        .then(res => {
          if (res.message !== 'error') {
            this.socialRelations = res.result
            if (this.socialRelations !== null) {
              for (let i = 0; i < this.socialRelations.length; i++) {
                if (this.socialRelations[i].socialRelationType === this.type) {
                  this.dynamicValidateForm.domains.push(Object.assign(this.socialRelations[i], { 'isFlag': 0 }))
                  this.isEdit.push(false)
                  this.preLen = this.preLen + 1
                }
              }
            }
            this.domainLen = this.dynamicValidateForm.domains.length
          } else {
            this.$message.error('操作失败！')
          }
        })
    },
    handleSubmit () {
      const list = []
      for (let i = 0; i < this.dynamicValidateForm.domains.length; i++) {
        if (this.dynamicValidateForm.domains[i].isFlag === 1) {
          list.push(this.dynamicValidateForm.domains[i])
        }
      }
      this.isSubmit = true
      this.isValid = true
      for (const domain of this.dynamicValidateForm.domains) {
        if (domain.socialRelationName === '' || domain.socialRelationRelationship === '' || domain.socialRelationIdcard === '' ||
          domain.socialRelationSex === '' || domain.socialRelationBirthday === '' || domain.socialRelationNativePlace === '' ||
          domain.socialRelationNation === '' || domain.socialRelationWorkUnits === '' || domain.socialRelationPost === '' ||
          domain.socialRelationPoliticsStatus === '' || domain.socialRelationReligion === '' || domain.socialRelationCurrentAddress === '') {
          this.isValid = false
        }
      }
      if (this.isValid === true) { // 内容都不为空
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            addSocialRelationList(list)
              .then(res => {
                if (res.message !== 'error') {
                  this.visible = false
                  this.confirmLoading = false
                  this.form.resetFields()
                  this.$emit('ok')
                  this.dynamicValidateForm.domains = []
                  this.domainLen = 0
                  this.isSubmit = false
                } else {
                  this.confirmLoading = false
                  this.$message.error('操作失败！')
                  this.dynamicValidateForm.domains = []
                  this.domainLen = 0
                  this.isSubmit = false
                }
              })
          } else {
            this.confirmLoading = false
          }
        })
      } else {
        this.$message.error('内容未填写完整! ')
      }
    },
    removeDomain (item) {
      this.socialRelationId = String(item.socialRelationId)
      if (item.isFlag === 0) {
        removeSocialRelation({ 'socialRelationIds': this.socialRelationId })
          .then(res => {
            if (res.message !== 'error') {
              this.$message.success('删除成功')
              this.preLen -= 1
            } else {
              this.$message.error('操作失败！')
            }
          })
      }
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.domainLen--
        this.dynamicValidateForm.domains.splice(index, 1)
      }
      for (let i = 0; i < this.domainLen; i++) {
        this.dynamicValidateForm.domains[i].key = i + 1
        if (i >= index) {
          this.isEdit[i] = this.isEdit[i + 1]
        }
      }
      this.isEdit.pop()
    },
    addDomain () {
      if (this.domainLen > this.preLen) {
        this.$message.error('请逐条添加信息！')
        return
      }
      this.domainLen++
      this.dynamicValidateForm.domains.push({
        isFlag: 1,
        personId: this.record.personId,
        personCard: this.record.personCard,
        personName: this.record.personName,
        socialRelationType: this.type,
        socialRelationName: '',
        socialRelationRelationship: '',
        socialRelationIdcard: '',
        socialRelationSex: '男',
        socialRelationBirthday: '',
        socialRelationNativePlace: '',
        socialRelationNation: '',
        socialRelationWorkUnits: '',
        socialRelationPost: '',
        socialRelationPoliticsStatus: '',
        socialRelationReligion: '',
        socialRelationCurrentAddress: '',
        key: this.domainLen
      })
      this.isEdit.push(true)
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
      this.dynamicValidateForm.domains = []
      this.domainLen = 0
      this.isSubmit = false
    }
  }
}
</script>
